<template>
<div class="message-list">
    <message-item v-for="(item, index) in messages" :key="index" :message="item" type="comment"
        @click="$emit('view-post', item.postId)" />

    <!-- 加载更多 -->
    <load-more :has-more="hasMore" :loading="loading" @load-more="$emit('load-more')" />

    <!-- 空状态 -->
    <empty-state v-if="messages.length === 0" type="comment" />
</div>
</template>

<script>
import MessageItem from '../MessageItem.vue'
import EmptyState from '../EmptyState.vue'
import LoadMore from '../LoadMore.vue'

export default {
    name: 'CommentTab',
    components: {
        MessageItem,
        EmptyState,
        LoadMore
    },
    props: {
        messages: {
            type: Array,
            default: () => []
        },
        hasMore: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style scoped>
.message-list {
    background-color: #fff;
}
</style>